// pages/scrollviewrefresh4/scrollviewrefresh4.js
/*
  说明：演示商品有多个分类，上拉显示下一个分类，下拉显示上一个分类
*/




var touchChange = false

Page({

  /**
   * 页面的初始数据
   */
  data: {
    upperThreshold: -50,
    lowerThreshold: -50,
    hideBottom: true,
    categoryList: null,
    currentCategoryIndex: 0,
    smallScrollViewToView: '',
    swiperCategoryArray: null,
    currentSwiperIndex: 0,
    coverScrollViewShow: false,
    coverScrollViewItemList: null,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var data = [
      [
        { id: "10000", name: '分类0 - 商品0', background: 'lightblue' },
        { id: "10001", name: '分类0 - 商品1', background: 'lightcoral' },
        { id: "10002", name: '分类0 - 商品2', background: 'lightgoldenrodyellow' },
        { id: "10003", name: '分类0 - 商品3', background: 'lightgreen' },
        { id: "10004", name: '分类0 - 商品4', background: 'lightgray' },
        { id: "10005", name: '分类0 - 商品5', background: 'lightslategray' },
        { id: "10006", name: '分类0 - 商品6', background: 'lightblue' },
      ],
      [
        { id: "20000", name: '分类1 - 商品0', background: 'lightgreen' },
        { id: "20001", name: '分类1 - 商品1', background: 'lightcoral' },
        { id: "20002", name: '分类1 - 商品2', background: 'lightslategray' },
        { id: "20003", name: '分类1 - 商品3', background: 'lightblue' },
        { id: "20004", name: '分类1 - 商品4', background: 'lightcoral' },
        { id: "20005", name: '分类1 - 商品5', background: 'lightgray' },
        { id: "20006", name: '分类1 - 商品6', background: 'lightgoldenrodyellow' },
      ],
      [
        { id: "30000", name: '分类2 - 商品0', background: 'lightgreen' },
        { id: "30001", name: '分类2 - 商品1', background: 'lightcoral' },
        { id: "30002", name: '分类2 - 商品2', background: 'lightslategray' },
        { id: "30003", name: '分类2 - 商品3', background: 'lightblue' },
        { id: "30004", name: '分类2 - 商品4', background: 'lightcoral' },
        { id: "30005", name: '分类2 - 商品5', background: 'lightgoldenrodyellow' },
        { id: "30006", name: '分类2 - 商品6', background: 'lightgreen' },
      ],
      [
        { id: "40000", name: '分类3 - 商品0', background: 'lightcoral' },
        { id: "40001", name: '分类3 - 商品1', background: 'lightgoldenrodyellow' },
        { id: "40002", name: '分类3 - 商品2', background: 'lightslategray' },
        { id: "40003", name: '分类3 - 商品3', background: 'lightblue' },
        { id: "40004", name: '分类3 - 商品4', background: 'lightcoral' },
        { id: "40005", name: '分类3 - 商品5', background: 'lightgoldenrodyellow' },
        { id: "40006", name: '分类3 - 商品6', background: 'lightgreen' },
      ],
      [
        { id: "50000", name: '分类4 - 商品0', background: 'lightslategray' },
        { id: "50001", name: '分类4 - 商品1', background: 'lightcoral' },
        { id: "50002", name: '分类4 - 商品2', background: 'lightslategray' },
        { id: "50003", name: '分类4 - 商品3', background: 'lightblue' },
        { id: "50004", name: '分类4 - 商品4', background: 'lightcoral' },
        { id: "50005", name: '分类4 - 商品5', background: 'lightgoldenrodyellow' },
        { id: "50006", name: '分类4 - 商品6', background: 'lightgreen' },
      ],
      [
        { id: "60000", name: '分类5 - 商品0', background: 'lightblue' },
        { id: "60001", name: '分类5 - 商品1', background: 'lightcoral' },
        { id: "60002", name: '分类5 - 商品2', background: 'lightslategray' },
        { id: "60003", name: '分类5 - 商品3', background: 'lightblue' },
        { id: "60004", name: '分类5 - 商品4', background: 'lightcoral' },
        { id: "60005", name: '分类5 - 商品5', background: 'lightgoldenrodyellow' },
        { id: "60006", name: '分类5 - 商品6', background: 'lightgreen' },
      ],
      [
        { id: "70000", name: '分类6 - 商品0', background: 'lightslategray' },
        { id: "70001", name: '分类6 - 商品1', background: 'lightcoral' },
        { id: "70002", name: '分类6 - 商品2', background: 'lightslategray' },
        { id: "70003", name: '分类6 - 商品3', background: 'lightblue' },
        { id: "70004", name: '分类6 - 商品4', background: 'lightcoral' },
        { id: "70005", name: '分类6 - 商品5', background: 'lightgoldenrodyellow' },
        { id: "70006", name: '分类6 - 商品6', background: 'lightgreen' },
      ],
    ]

    this.setData({
      categoryList: data,
    })
    this.fillSwiperCategoryArray()
    this.bottomShowDeal()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  catchtouchmove: function(event) {
    return false
  },

  fillSwiperCategoryArray() {
    if (this.data.currentCategoryIndex == 0) { 
      this.setData({
        swiperCategoryArray: this.data.categoryList.slice(0, 2), //取前两个元素
      })
      this.setData({
        currentSwiperIndex: 0,
      })
    }
    else if (this.data.currentCategoryIndex == this.data.categoryList.length-1) {
      this.setData({
        swiperCategoryArray: this.data.categoryList.slice(this.data.categoryList.length - 2), //取最后两个元素
      })
      this.setData({
        currentSwiperIndex: 1,
      })
    }
    else {
      this.setData({
        swiperCategoryArray: this.data.categoryList.slice(this.data.currentCategoryIndex - 1, this.data.currentCategoryIndex+2) //取三个元素，当前元素在中间
      })
      this.setData({
        currentSwiperIndex: 1,
      })
    }

    this.bottomShowDeal()

    //
    var that = this
    setTimeout(function() {
      that.setData({
        smallScrollViewToView: 'item0',
      })
    }, 200)
    setTimeout(function(){
      that.setData({
        coverScrollViewShow: false
      })
    }, 500)
  },

  bottomShowDeal() {
    this.setData({
      hideBottom: (this.data.currentCategoryIndex == this.data.categoryList.length - 1 ? true : false),
    })
  },

  bindSwiperChange: function(event) {
    var current = event.detail.current
    var source = event.detail.source
    console.log("bindChange: current= " + current + ";  source= " + source)
    if (source == "touch") {
      touchChange = true
    }
  },

  bindSwiperAnimationFinish: function(event) {
    var current = event.detail.current
    var source = event.detail.source
    console.log("bindAnimationFinish: current= " + current + ";  source= " + source)
    if (touchChange) {
      this.setData({
        coverScrollViewItemList: this.data.swiperCategoryArray[current]
      })
      this.setData({
        coverScrollViewShow: true
      })
      if (current < this.data.currentSwiperIndex) { //展示上一个了
        this.setData({
          currentCategoryIndex: (this.data.currentCategoryIndex - 1 >= 0 ? this.data.currentCategoryIndex - 1 : 0)
        })
        this.fillSwiperCategoryArray()
        wx.vibrateShort()
      }
      else { //展示下一个了
        this.setData({
          currentCategoryIndex: (this.data.currentCategoryIndex < this.data.categoryList.length - 1 ? this.data.currentCategoryIndex + 1 : this.data.categoryList.length - 1)
        })
        this.fillSwiperCategoryArray()
        wx.vibrateShort()
      }
      touchChange = false
    }
  }
})